<template>
  <a-layout :style="{width: '100%', height: '720px', overflow: 'auto'}">
    <top-bar/>
    <a-layout-content :style="{padding: '10px 30px', marginTop: '50px'}">
        <a-layout style="margin-top: 12px">
          <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
            <div class="logo" />
            <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
              <a-menu-item key="1" @click=routerChange(1)>
                <user-outlined />
                <span>好友列表</span>
              </a-menu-item>
              <a-menu-item key="2" @click=routerChange(2)>
                <video-camera-outlined />
                <span>我的消息</span>
              </a-menu-item>
            </a-menu>
          </a-layout-sider>
          <a-layout>
            <a-layout-content
                :style="{ margin: '24px 16px', padding: '24px', background: '#fff'}"
            >
              <router-view/>
            </a-layout-content>
          </a-layout>

        </a-layout>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
import TopBar from "@/components/common/TopBar.vue";
import { ref , onBeforeMount, onBeforeUnmount} from 'vue';
import {
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
} from '@ant-design/icons-vue';
import router from "@/router";
import {subscribe, unsubscribe} from "pubsub-js";

const selectedKeys = ref(['1']);
const collapsed = ref(false);
let userId = null

const routerChange=(routerKey)=>{
  let pathName = 'friendList'
  switch (routerKey){
    case 1:
      pathName = 'friendList';
      break;
    case 2:
      pathName = 'chatContent';
      break;
  }
  router.push({
    name: pathName,
    params: {userId: userId}
  })
}

let subId = subscribe("routerChange", (msg, data)=>{
  selectedKeys.value = [`${data}`]
})

onBeforeMount(_=>{
  userId = router.currentRoute.value.params.userId
})

onBeforeUnmount(_=>{
  unsubscribe(subId)
})

</script>
<style>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;
}

.site-layout .site-layout-background {
  background: #fff;
}
</style>